<template>
  <div>
    <a-row :gutter="[20, 0]">
      <a-col :span="6">
        <a-card
          :body-style="{ padding: '24px 32px' }"
          :bordered="false"
          class="menu"
        >
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <a-tree
              :tree-data="treeData"
              :replaceFields="replaceFields"
              :defaultExpandAll="true"
              :autoExpandParent="true"
              @select="selectTreeNode"
            >
            </a-tree>
          </div>
        </a-card>
      </a-col>
      <a-col style="background:#fff"  :span="18">
        <div class="conditionsSearch">条件搜索</div>
        <div class="search-wrapper">
          <!-- 头部搜索 -->
          
          <a-form-model class="topAntform" ref="searchFormRef" :model="searchFormData">
            <a-form-model-item label="岗位名称:" class="serach-input">
              <a-input placeholder="请输入" size="large" v-model="searchFormData.name"/>
            </a-form-model-item>
          </a-form-model>
          <!-- 按钮组 -->
          <div class="btn-group">
            <a-button type="success" icon="search" @click="searchBtnClick" style="background-color:#0079FE;color:#fff">
              查询
            </a-button>
            <!-- <a-button @click="resetBtnClick">重置</a-button> -->
          </div>
        </div>
        <a-card :body-style="{ padding: '10px 0px' }" :bordered="false">
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: center;
              width:100%;
              height:30px;
              float:right;
              margin-bottom:10px;
              justify-content: space-between;
            "
          >
          <span style="padding-left:12px;color: rgba(0, 0, 0, 0.85);font-size: 14px;">当前有<span style="padding:0 3px">{{tableData.length}}</span>条数据</span>
            <div
              style="text-align: right; cursor: pointer"
              class="handle"
            >
              <!-- <a
                href="javascript:;"
                style="margin: 0 10px 0 0"
                @click="addResourceHandle"
                >新增</a
              > -->
              <a class="addStyle" style="margin-right: 8px;color:#fff;" @click="addResourceHandle" v-permission:gwManage="['add']">
                  <a-icon type="plus"/>新增
                </a>
            </div>
          </div>
          <div style="margin-top: 40px">
            <a-table
              :columns="columns"
              :data-source="tableData"
              :pagination="pagination"
              size="small"
            >
              <template slot="operation" slot-scope="text, record, index">
                <div class="editable-row-operations">
                  <a
                    href="javascript:;"
                    
                    v-permission:gwManage="['update']"
                    @click="updateResourceHandle(text, record, index)"
                  >
                    编辑</a
                  >

                  <a
                    href="javascript:;"
                    style="margin: 0 10px"
                    v-permission:gwManage="['delete']"
                    @click="deleteResourceHandle(text, record, index)"
                  >
                    删除</a
                  >
                  <a
                    v-if="record.shield == 0"
                    href="javascript:;"
                    @click="enableResourceHandle(text, record, index)"
                    >禁用</a
                  >
                  <a
                    v-else
                    href="javascript:;"
                    @click="enableResourceHandle(text, record, index)"
                    >启用</a
                  >
                </div>
              </template>
            </a-table>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <a-modal
      title="新增/编辑"
      width="40%"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="visible = false"
    >
      <a-form-model
        ref="ruleForm"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 14 }"
        :model="menuObj"
        :rules="rules"
      >
        <a-form-model-item ref="parentName" label="部门名称" prop="parentName">
          {{ parentObj.name }}
        </a-form-model-item>
        <a-form-model-item label="岗位" prop="name">
          <a-input v-model="menuObj.name" />
        </a-form-model-item>

        <a-form-model-item label="岗位编号" prop="code">
          <a-input v-model="menuObj.code" />
        </a-form-model-item>
        <a-form-model-item label="计划岗位人数" prop="plantUserNumber">
          <a-input v-model="menuObj.plantUserNumber"></a-input>
        </a-form-model-item>

        <!-- <a-form-model-item label="岗位描述" prop="postDesc">
          <a-input v-model="menuObj.postDesc"></a-input>
        </a-form-model-item> -->
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import {
  queryOrgTreeA,
  gwQueryListPageA,
  gwSaveA,
  gwUpdateA,
  gwShieldA,
  gwDeleteA,
} from "../../services/system";
export default {
  name: "MenuManage",
  data() {
    return {
      searchFormData: {
        name: "",
      },
      appList: [],
      channelList: [],
      query: {
        appInfoCode: null,
        channelType: null,
      },
      searchValue: "",
      treeData: [],
      replaceFields: {
        title: "name",
        key: "id",
        children: "child",
      },
      visible: false,
      confirmLoading: false,
      parentObj: {},
      menuObj: {
        plantUserNumber: null,
        orgId: null,
        name: null,
        code: null,
        tenantCode: sessionStorage.getItem("tenantCode"),
      },
      rules: {
        name: [{ required: true, message: "不能为空", trigger: "blur" }],
        code: [{ required: true, message: "不能为空", trigger: "blur" }],
        plantUserNumber: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
      },
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      columns: [
        {
          title: "岗位",
          dataIndex: "name",
        },
        {
          title: "部门名称",
          dataIndex: "orgName",
        },

        {
          title: "实际岗位人数",
          dataIndex: "actualUserNumber",
        },

        {
          title: "计划岗位人数",
          dataIndex: "plantUserNumber",
        },

        {
          title: "操作",
          dataIndex: "Action",
          scopedSlots: { customRender: "operation" },
        },
      ],
      tableData: [],
    };
  },
  created() {
    this.getRoleList();
  },
  methods: {
    getRoleList() {
      const parma = {
        orgId: this.parentObj.id,

        tenantCode: sessionStorage.getItem("tenantCode"),
      };
      gwQueryListPageA(parma).then((res) => {
        this.tableData = res.data.data.rows;
      });
      const parmas = {
        tenantCode: sessionStorage.getItem("tenantCode"),
      };
      queryOrgTreeA(parmas).then((res) => {
        this.treeData = res.data.data;
      });
    },
    selectTreeNode(selectedKeys, e) {
      this.parentObj = e.node.dataRef;
      this.menuObj.orgId = this.parentObj.parentId;
      this.menuObj.tenantCode = sessionStorage.getItem("tenantCode");
      const parma = {
        orgId: this.parentObj.id,

        tenantCode: sessionStorage.getItem("tenantCode"),
      };
      gwQueryListPageA(parma).then((res) => {
        this.tableData = res.data.data.rows;
      });
    },

    //新增按钮

    handleOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.confirmLoading = true;
          let handle;
          console.log("1===", this.menuObj);

          if (this.menuObj.id) {
            handle = gwUpdateA(this.menuObj.id, this.menuObj);
          } else {
            console.log(this.menuObj);
            handle = gwSaveA(this.menuObj);
          }
          handle
            .then((res) => {
              this.confirmLoading = false;
              if (res.data.status == 0) {
                this.visible = false;
                this.getRoleList();
              }
            })
            .catch((error) => {
              console.log(error);
              this.confirmLoading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //新增
    addResourceHandle() {
      if (this.parentObj.name) {
        this.dataType = 1;
        this.menuObj = {
          name: null,
          orgId: this.parentObj.id ? this.parentObj.id : "",
          code: null,
          tenantCode: sessionStorage.getItem("tenantCode"),
        };
        this.visible = true;
      } else {
        this.$message.error("请选择一个菜单");
      }
    },
    //编辑
    updateResourceHandle(text, item) {
      console.log(item);
      this.dataType = 1;
      // this.getMenuById(item.id);

      (this.menuObj = {
        plantUserNumber: item.plantUserNumber,
        orgId: item.orgId,
        code: item.code,
        name: item.name,
        id: item.id,
        tenantCode: sessionStorage.getItem("tenantCode"),
      }),
        (this.visible = true);
    },

    //删除
    deleteResourceHandle(text, item) {
      let vm = this;

      this.$confirm({
        title: "您确定要删除该数据？",
        content: "数据删除后不可恢复",
        onOk() {
          return new Promise((resolve, reject) => {
            gwDeleteA(item.id).then((res) => {
              if (res.data.status == 0) {
                vm.getRoleList();
                resolve();
              } else {
                reject(res.data.msg);
              }
            });
          });
        },
        onCancel() {},
      });
    },

    //禁用、启用
    enableResourceHandle(text, item) {
      let vm = this;

      if (item.shield == 0) {
        //要去禁用
        vm.title = "您确定要禁用该数据？";
        item.shield = 1;
      } else {
        //要去启用
        vm.title = "您确定要启用该数据？";
        item.shield = 0;
      }
      this.$confirm({
        title: vm.title,
        onOk() {
          return new Promise((resolve, reject) => {
            gwShieldA(item.id, item.shield).then((res) => {
              if (res.data.status == 0) {
                vm.getRoleList();
                resolve();
              } else {
                reject(res.data.msg);
              }
            });
          });
        },
        onCancel() {},
      });
    },
    //搜索
    searchBtnClick() {
      const parma = {
        orgId: this.menuObj.orgId,
        name: this.searchFormData.name,
        tenantCode: sessionStorage.getItem("tenantCode"),
      };
      gwQueryListPageA(parma).then((res) => {
        this.tableData = res.data.data.rows;
      });
    },
  },
};
</script>

<style lang="less" scoped>
  .conditionsSearch{
    border: 1px solid #eee;
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 4px 4px 0 0;
    margin-top: 15px;
  }
  .search-wrapper{
    border-radius: 0 0 4px 4px;
    display: flex;
    background-color: #fff;
    align-items: center;
    border: 1px solid #eee;
    border-top: none;
    padding-left: 12px;
    padding-bottom: 8px ;
  }
  .topAntform{
    width: 313px;
    height: 48px;
  }
  .serach-input {
    display: flex;
    padding-top:5px ;
    input {
      margin-left: 10px;
      height: 30px;
    }
  }
  .btn-group {
    padding: 0;
    button {
      background-color: #fff!important;
      color: #666!important;
    }
  }
/deep/ .ant-card{
  padding-top:0 ;
}
.addStyle{
  display: flex;
  align-items: center;
  justify-content: center;
  background:rgb(0, 121, 254);
  width:78px;
  height:30px;
}
.menu {
  .handle {
    i {
      margin: 0 10px;
      font-size: 16px;
      cursor: pointer;
    }
  }
}
</style>
